<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$config.name}-代码编辑器</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0
        }

        #container {
            width: 100%;
            height: 100%;
            min-height: 400px;
            box-sizing: border-box;
            border: 1px solid #f1f1f1;
            padding: 10px;
            box-sizing: border-box;
        }
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border-radius: 4px;
            background-color: #38a0f4;
            border-color: #42a5f5;
            color: #fff;
            text-decoration: none;
            outline: 0!important;
            border-style: none;
        }
        .panel-footer{
            margin-left: 10%;
            margin-top: 15px;
            position: relative;
        }
        .dot{
            position: absolute;
            right: 15px;
        }
    </style>
</head>
<body name="{$config.editorName}">
<div id="container"></div>
<div class="panel-footer">
    <div class="dot">
        <button class="btn btn-warning" type="reset" onclick="saveEditor()">保存数据</button>
        <button class="btn btn-mint" type="submit" onclick="saveEditorClose()" style="background-color:#dddddd; color:#666">关闭</button>
    </div>
</div>
<script src="{$Think.config.web_editor}/node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
    var monacoEditor;
    function editorStart(value) {
        require.config({paths: {'vs': '{$Think.config.web_editor}/node_modules/monaco-editor/min/vs'}});
        require(['vs/editor/editor.main'], function () {
            monacoEditor = monaco.editor.create(document.getElementById('container'), {
                value: formatJson(value),
                language: '{$config.language||default="html"}'
            });
        });
    }
    var def = localStorage.getItem('{$config.editorName}');
    editorStart([def].join('\n'));
    function saveEditor() {
        window.parent.saveEditor(monacoEditor.getValue());
    }
    function saveEditorClose() {
        window.parent.EditorClose();
    }
    var formatJson = function (json, options) {
        var reg = null,
            formatted = '',
            pad = 0,
            PADDING = '    ';
        options = options || {};
        options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
        options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
        if (typeof json !== 'string') {
            json = JSON.stringify(json);
        } else {
            json = JSON.parse(json);
            json = JSON.stringify(json);
        }
        reg = /([\{\}])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /([\[\]])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /(\,)/g;
        json = json.replace(reg, '$1\r\n');
        reg = /(\r\n\r\n)/g;
        json = json.replace(reg, '\r\n');
        reg = /\r\n\,/g;
        json = json.replace(reg, ',');
        if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
            reg = /\:\r\n\{/g;
            json = json.replace(reg, ':{');
            reg = /\:\r\n\[/g;
            json = json.replace(reg, ':[');
        }
        if (options.spaceAfterColon) {
            reg = /\:/g;
            json = json.replace(reg, ':');
        }
        (json.split('\r\n')).forEach(function (node, index) {
                var i = 0,
                    indent = 0,
                    padding = '';

                if (node.match(/\{$/) || node.match(/\[$/)) {
                    indent = 1;
                } else if (node.match(/\}/) || node.match(/\]/)) {
                    if (pad !== 0) {
                        pad -= 1;
                    }
                } else {
                    indent = 0;
                }

                for (i = 0; i < pad; i++) {
                    padding += PADDING;
                }

                formatted += padding + node + '\r\n';
                pad += indent;
            }
        );
        return formatted;
    };
</script>
</body>
</html>